<script>
  import {
    count,
    getCount,
    count2,
    unsubscribe,
    userInfo,
  } from '@/store/index.Store.js'

  let countValue

  const unCountValue = count.subscribe((v) => {
    countValue = v
  })

  function handleCountAdd() {
    count.update((v) => v + 1)
    console.log(1)
  }
  function countDecrement() {
    count.update((v) => v - 1)
  }

  function count2Add() {
    count2.update((v) => v + 1)
  }
  count2.subscribe((v) => {
    console.log('count2 v: ', v)
  })
  function count2Decrement() {
    count2.update((v) => v - 1)
  }

  // 用户资料
  function handleSetInfo() {
    userInfo.setInfo({
      id: 1,
      gender: '男',
      name: 'shutong',
      age: 18,
      info: '帅哥',
    })
  }
  function handleUpdateInfo() {
    userInfo.updateInfo('age', 20)
  }
</script>

<span>count: {countValue}</span>
<span>count2: {$count2}</span>
<button on:click={handleCountAdd}>count +</button>
<button on:click={countDecrement}>count -</button>
<button on:click={unCountValue}>unCountValue</button>
<button on:click={count2Add}>count2 + </button>
<button on:click={count2Decrement}>count2 - </button>
<button on:click={unsubscribe}>unCount2Value</button>

<!-- 用户资料 -->
<div>
  <div>
    个人资料：
    <ul>
      {#if $userInfo}
        {#each Object.keys($userInfo) as key (key)}
          <li>{key} : {$userInfo[key]}</li>
        {/each}
      {/if}
    </ul>
  </div>
  <button on:click={handleSetInfo}>设置用户资料</button>
  <button on:click={handleUpdateInfo}>更新</button>
</div>
